<template>
  <div class="prescription-detail-handle">
    <div v-if="prescriptionData" class="detail-content">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="处方编号">
          {{ prescriptionData.prescriptionNo }}
        </el-descriptions-item>
        <el-descriptions-item label="处方状态">
          <el-tag :type="getStatusTagType(prescriptionData.status)">
            {{ getStatusText(prescriptionData.status) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="患者姓名">
          {{ prescriptionData.userName }}
        </el-descriptions-item>
        <el-descriptions-item label="开具医生">
          {{ prescriptionData.doctorName }}
        </el-descriptions-item>
        <el-descriptions-item label="科室">
          {{ prescriptionData.departmentName }}
        </el-descriptions-item>
        <el-descriptions-item label="处方类型">
          <el-tag :type="getTypeTagType(prescriptionData.type)">
            {{ getTypeText(prescriptionData.type) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="总金额">
          ¥{{ prescriptionData.totalAmount }}
        </el-descriptions-item>
        <el-descriptions-item label="开具时间">
          {{ formatDateTime(prescriptionData.prescribeTime) }}
        </el-descriptions-item>
        <el-descriptions-item label="审核时间">
          {{ formatDateTime(prescriptionData.reviewTime) }}
        </el-descriptions-item>
        <el-descriptions-item label="审核医生">
          {{ prescriptionData.reviewerName || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="配药时间">
          {{ formatDateTime(prescriptionData.dispenseTime) }}
        </el-descriptions-item>
        <el-descriptions-item label="配药药师">
          {{ prescriptionData.pharmacistName || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="备注" :span="2">
          {{ prescriptionData.remark || '无' }}
        </el-descriptions-item>
      </el-descriptions>

      <!-- 添加药品明细表格 -->
      <div v-if="prescriptionData.prescriptionDetails && prescriptionData.prescriptionDetails.length > 0" 
           class="medicine-details">
        <h3 class="detail-title">药品明细</h3>
        <el-table :data="prescriptionData.prescriptionDetails" border style="width: 100%">
          <el-table-column prop="medicineName" label="药品名称" min-width="150" />
          <el-table-column prop="medicineSpecification" label="规格" width="120" />
          <el-table-column prop="medicineUnit" label="单位" width="80" />
          <el-table-column prop="quantity" label="数量" width="80" />
          <el-table-column prop="medicineUsage" label="用法" width="120" />
          <el-table-column prop="frequency" label="频次" width="120" />
          <el-table-column prop="unitPrice" label="单价" width="100">
            <template #default="{ row }">
              ¥{{ row.unitPrice }}
            </template>
          </el-table-column>
          <el-table-column prop="amount" label="小计" width="100">
            <template #default="{ row }">
              ¥{{ row.amount }}
            </template>
          </el-table-column>
        </el-table>
      </div>
      
      <div v-else class="no-medicines">
        <el-empty description="暂无药品信息" />
      </div>
    </div>
    
    <div class="dialog-footer">
      <el-button @click="handleClose">关闭</el-button>
    </div>
  </div>
</template>

<script setup>
// 定义props
const props = defineProps({
  prescriptionData: {
    type: Object,
    default: () => ({})
  }
})

// 定义emits
const emit = defineEmits(['close'])

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    0: '待审核',
    1: '已审核',
    2: '已配药',
    3: '已完成',
    4: '已取消'
  }
  return statusMap[status] || '未知'
}

// 获取状态标签类型
const getStatusTagType = (status) => {
  const typeMap = {
    0: 'warning',
    1: 'primary',
    2: 'success',
    3: 'info',
    4: 'danger'
  }
  return typeMap[status] || 'info'
}

// 获取类型文本
const getTypeText = (type) => {
  const typeMap = {
    1: '西药',
    2: '中药',
    3: '检查',
    4: '治疗'
  }
  return typeMap[type] || '未知'
}

// 获取类型标签类型
const getTypeTagType = (type) => {
  const typeMap = {
    1: 'primary',
    2: 'success',
    3: 'warning',
    4: 'info'
  }
  return typeMap[type] || 'info'
}

// 格式化日期时间
const formatDateTime = (dateTime) => {
  if (!dateTime) return '-'
  return new Date(dateTime).toLocaleString('zh-CN')
}

// 处理关闭
const handleClose = () => {
  emit('close')
}
</script>

<style scoped>
.prescription-detail-handle {
  padding: 20px 0;
}

.detail-content {
  padding: 20px 0;
}

.medicine-details {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
}

.detail-title {
  margin: 0 0 20px 0;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.no-medicines {
  margin-top: 20px;
  padding: 40px 0;
  text-align: center;
  background-color: #fafafa;
  border-radius: 4px;
}

.dialog-footer {
  margin-top: 20px;
  text-align: right;
}

:deep(.el-descriptions__label) {
  font-weight: 600;
}

:deep(.el-table th) {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: 600;
}
</style> 